<template>
	<view class="study-container">
		<view class="study-header">
			<CommonNav name="累计学习"></CommonNav>
			<image src="../../static/imgs/study.png"></image>
			<view class="study-desc c-theme-btn-w">
				<view class="left">
					<text>已经连续学习：</text>
					<text>3天</text>
				</view>
				<view class="right">
					<image src="../../static/imgs/share.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="today-study">
			<CommonNav name="今日学习" style="margin: 40rpx 0;"></CommonNav>
			<view class="today-item">
				<view class="left c-theme-btn-b">
					<image src="../../static/imgs/study-morining.png" mode=""></image>
				</view>
				<view class="right">
					<view class="top">
						<view class="top-left">
							<text style="color: #3D5464;font-size: 29rpx;">8:00-9:30</text>
						</view>
						<view class="top-right">
							<view style="color: #3D5464;font-size: 29rpx;">UI设计的提升</view>
							<view>
								<text style="color: #999FAD;font-size: 20rpx;">授课：xxxx</text>
								<image style="width: 20rpx;height: 20rpx;" src="../../static/imgs/export-add.png"
									mode=""></image>
							</view>
						</view>
					</view>
					<view class="footer">
						<view class="top-left">
							<text style="color: #3D5464;font-size: 29rpx;">8:00-9:30</text>
						</view>
						<view class="top-right">
							<view style="color: #3D5464;font-size: 29rpx;">UI设计的提升</view>
							<view>
								<text style="color: #999FAD;font-size: 20rpx;">授课：xxxx</text>
								<image style="width: 20rpx;height: 20rpx;" src="../../static/imgs/export-add.png"
									mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="today-item">
				<view class="left c-theme-btn-b">
					<image src="../../static/imgs/study-after.png" mode=""></image>
				</view>
				<view class="right">
					<view class="top">
						<view class="top-left">
							<text style="color: #3D5464;font-size: 29rpx;">8:00-9:30</text>
						</view>
						<view class="top-right">
							<view style="color: #3D5464;font-size: 29rpx;">UI设计的提升</view>
							<view>
								<text style="color: #999FAD;font-size: 20rpx;">授课：xxxx</text>
								<image style="width: 20rpx;height: 20rpx;" src="../../static/imgs/export-add.png"
									mode=""></image>
							</view>
						</view>
					</view>
					<view class="footer">
						<view class="top-left">
							<text style="color: #3D5464;font-size: 29rpx;">8:00-9:30</text>
						</view>
						<view class="top-right">
							<view style="color: #3D5464;font-size: 29rpx;">UI设计的提升</view>
							<view>
								<text style="color: #999FAD;font-size: 20rpx;">授课：xxxx</text>
								<image style="width: 20rpx;height: 20rpx;" src="../../static/imgs/export-add.png"
									mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="study-list">
			<CommonNav name="学习记录"></CommonNav>
			<view class="list-box">
				<view class="list-item" v-for="item in courseData" :key="item.id" @click="toDetail(item.id)">
					<image src="../../static/imgs/study-1.png" mode=""></image>
					<view class="list-title">
						<text>{{item.title}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import CommonNav from "../../components/CommonNav.vue"
	import {
		course
	} from "@/api/index.js"
	export default {
		components: {
			CommonNav
		},
		data() {
			return {
				courseData: []
			}
		},
		methods: {
			getCoure() {
				course().then(res => {
					this.courseData = res.data.records
				})
			},
			toDetail(id){
				uni.navigateTo({
					url:"/pages/index/details?id="+id
				})
			}
		},
		onShow() {
			this.getCoure()
		}
	}
</script>

<style lang="scss" scoped>
	.study-container {
		padding: 60rpx;

		.study-header {
			image {
				height: 340rpx;
				width: 100%;
			}

			.study-desc {
				padding: 21rpx 40rpx;
				background-color: #F4F6F8;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				border: 2rpx solid #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.right {
					image {
						width: 27rpx;
						height: 30rpx;
					}
				}
			}
		}

		.today-study {
			.today-item {
				display: flex;
				justify-content: space-between;
				margin-bottom: 40rpx;

				.left {
					width: 82rpx;
					height: 82rpx;
					background: #FFFFFF;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					border: 2rpx solid #FFFFFF;
					line-height: 82rpx;
					text-align: center;

					image {
						width: 45rpx;
						height: 43rpx;
						margin-top: 20rpx;
					}
				}

				.right {
					width: 400rpx;
					border: 2rpx solid #FFFFFF;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					background: #F4F6F8;
					padding: 55rpx 59rpx;

					.top {
						display: flex;
						justify-content: space-between;
						border-bottom: 1px solid #DAE2F4;

						.top-left {
							border-right: 1px solid #DAE2F4;
							padding-right: 60rpx;
						}

						.top-right {
							padding-bottom: 20rpx;
						}
					}

					.footer {
						display: flex;
						justify-content: space-between;

						.top-left {
							border-right: 1px solid #DAE2F4;
							padding-right: 60rpx;
							padding-top: 20rpx;
						}

						.top-right {
							padding-top: 20rpx;
						}
					}
				}
			}
		}

		.study-list {
			.list-box {
				padding-bottom: 60rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;

				.list-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 210rpx;

					image {
						width: 200rpx;
						height: 180rpx;
					}

					.list-title {
						font-size: 20rpx;
					}
				}
			}
		}
	}
</style>
